﻿@{
    ViewBag.Title = "ReportDetail";
    Layout = "~/Views/Shared/_PageLayout.cshtml";
}
@section HeadSection
{
    <script src="../../Scripts/Highcharts/highcharts.js"></script>
    <script src="../../Scripts/public.js"></script>
    <script type="text/javascript">
        var rcType = "@ViewBag.rcType";
        var userId = "@ViewBag.userId";
        $(function () {
            var beginTime = getNowZeroDate();
            var endTime = getNowFormatDate();
            //加载当天数据
            getJsonDetail(rcType, userId, beginTime, endTime);
        });
        function doSearch() {
            var beginTime = $("#beginTime").datetimebox('getValue');
            var endTime = $("#endTime").datetimebox('getValue');
            if (beginTime == "" || endTime == "") {
                beginTime = getNowZeroDate();
                endTime = getNowFormatDate();
                getJsonDetail(rcType, userId, beginTime, endTime)
            }
            else {
                getJsonDetail(rcType, userId, beginTime, endTime)
            }
        }
        function getJsonDetail(rcType, userId, beginTime, endTime) {
            $.getJSON("/Report/GetReportDetails?rcType=" + rcType + "&userId=" + userId + "&beginTime=" + beginTime + "&endTime=" + endTime + "", function (data) {
                var type_Arr = [];
                var count_Arr = [];
                if (data.rows.length > 0) {
                    for (var i = 0; i < data.rows.length; i++) {
                        var row = data.rows[i];
                        var merc = row.RechargeAmount;
                        var c = row.TypeCount;
                        type_Arr.push(merc);
                        count_Arr.push(c);
                    }
                }
                var chart1 = new Highcharts.Chart({
                    chart: {
                        type: "column",
                        renderTo: "container1",
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                    },
                    credits: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    title: {
                        text: '充值报表'
                    },
                    subtitle: {
                        text: beginTime + ' - ' + endTime,
                        align: 'center',
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '统计数量'
                        }
                    },
                    xAxis: {
                        categories: type_Arr,
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y} </b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: [
                    {
                        name: '总数',
                        data: count_Arr
                    }
                    ]
                });
            });
        }
    </script>
}
@{
    string rct = ViewBag.rcType;
    string typeName = "";
    switch (rct) {
        case "1":
            typeName = "手机充值";
            break;
        case "2":
            typeName = "QQ充值";
            break;
        case "3":
            typeName = "礼品卡充值";
            break;
        case "4":
            typeName = "流量包";
            break;
        default:
            typeName = "微信红包";
            break;

    }   
}
<div>
    <div class="easyui-panel" title="@ViewBag.userTitle || @typeName || 详细报表" style="padding:5px;background: #fafafa;" 
    data-options="iconCls:'icon-save',closable:true,collapsible:true,minimizable:true,maximizable:true">
        <div>
            时间：
    <input class="easyui-datetimebox" id="beginTime" style="width: 150px" />
            -
            <input class="easyui-datetimebox" id="endTime" style="width: 150px" />
            <a href="#" class="easyui-linkbutton" onclick="doSearch();" iconcls="icon-search">搜索</a>
        </div>

    </div>
    <div class="easyui-panel" title="" style="padding: 5px;">
        <div class="box-content" title="" style="padding: 5px; height: auto;">
            <div id="container1" style="width: 100% auto; height: auto"></div>
        </div>
    </div>
</div>
